<template>
  <div v-if="detailData.status == 'running'">
    <div class="podUrl-box">
      <div>
        <div>
          <p class="info-item-name" v-if="tcpPortList.length != 0">仿真端口映射</p>
        </div>
        <ul class="info-item">
          <div>
            <p>--------------------</p>
          </div>
          <li v-for="(tag, i) in tcpPortList" :key="i">
            <span class="key">协议：{{ tag.proxyProtocol }}</span>
            <span class="key">容器端口：{{ tag.containerPort }}</span>
            <span class="key">映射端口：{{ tag.nodePort }}</span>
            <span class="key">映射地址：{{ tag.endpoint }}</span>
          </li>
        </ul>
      </div>

      <br />
      <br />

      <div>
        <div>
          <p class="info-item-name">节点容器信息</p>
        </div>
        <div>
          <div class="info-item"><span>仿真节点:</span></div>
          <ul class="info-pad">
            <div>
              <p>--------------------</p>
            </div>
            <li v-for="(pod, i) in simulationPod.pod_list" :key="i">
              <p class="key">节点名称：{{ pod.name }}</p>
              <p class="val">节点id：{{ pod.uid }}</p>
              <p class="val">节点ip：{{ pod.pod_ip }}</p>
            </li>
          </ul>
        </div>
        <br />
        <div>
          <div class="info-item"><span>业务节点:</span></div>
          <ul class="info-pad">
            <div>
              <p>--------------------</p>
            </div>
            <li v-for="(group, i) in jobPod" :key="i">
              <p class="key">节点分组-{{ i }}</p>
              <div v-for="(pod, j) in group.pod_list" :key="j">
                <p class="key">节点名称：{{ pod.name }}</p>
                <p class="val">节点id：{{ pod.uid }}</p>
                <p class="val">节点ip：{{ pod.pod_ip }}</p>
                <br />
              </div>
            </li>
            <br />
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      activeName: '1',
      simulationPod: [],
      jobPod: [],
      tcpPortList: []
    };
  },
  props: ['detailData'],
  async mounted() {
    this.$nextTick(async () => {
      await this.getData()
      this.simulationPod = this.detailData.simulation_node_group;
      this.jobPod = this.detailData.node_group_list;
      this.tcpPortList = this.detailData.tcp_port_list
    })
  },
  components: {
  },
  methods: {
    handleClick() { },
    async getData() {
      await new Promise(resolve => {
        setTimeout(() => {
          this.target = ['上海', '北京', '广州', '深圳']
          resolve()
        }, 1000)
      })
      return
    }
  }
}
</script>
<style lang="less" scoped>
.info-item-name {
  line-height: 26px;
  color: #606266;
  padding: 8px 16px;
}

.info-item {
  margin: 0 16px;
  // background: #FFF;

  li {
    display: flex;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #E6E6E6;
    line-height: 40px;
    height: 40px;
    padding: 0 8px;
  }

  .key {}

  .val {
    min-width: 220px;
  }
}

.info-pad {
  margin: 0 16px;
}
</style>